<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="搜索" left-arrow @click-left="$router.back()" />
        </header>
        <div class="content">
            <van-search v-model="value" placeholder="请输入搜索关键词" show-action @search="onSearch" @cancel="onCancel" />
            <van-empty v-if="list.length == 0" image="search" description="没有找到相关商品" />
            <div v-else v-for="item in list" :key="item.id">
                <van-card :price="item.price" :title="item.title" :thumb="item.image" />
            </div>
        </div>
    </div>
</template>
<script>
import request from '@/utils/request'
import { onMounted, ref } from 'vue'
export default {
    setup() {
        const value = ref('')
        const list = ref([])
        const query = () => {
            request.get('/search', {
                params: {
                    value: value.value
                }
            }).then(res => {
                if (res.data.code == 200) {
                    list.value = res.data.data
                }
            })
        }
        const onSearch = () => {
            query()
        }
        const onCancel = () => {
            value.value = ""
            query()
        }
        onMounted(() => {
            query()
        })
        return {
            value,
            list,
            onSearch,
            onCancel
        }
    }
}
</script>